<template>
    <view class="hp-rank-con">
        <header-vue :back="true" bgColor="transparent" />
        <!-- 背景图片 -->
        <image class="rank-bg" :src="IMAGE_URL + '/static/index/rank_bg.png'" mode="aspectFill"></image>

        <view class="con-box">
            <!-- 装饰图标 -->
            <image class="rank-icon" :src="IMAGE_URL + '/static/index/rank_icon.png'" mode="aspectFit"></image>
            
            <view class="title">
                <!-- 标题图片 -->
                <image class="title-img" :src="IMAGE_URL + '/static/index/rank_tit.png'" mode="aspectFit"></image>
            </view>
            <view class="sub">6月16日更新，按平台家政服务好评率排序</view>
        </view>
        <scroll-view class="rank-list" scroll-y :refresher-enabled="true" :refresher-triggered="refresherTriggered"
            @refresherrefresh="onRefresh" @scrolltolower="onLoadMore" :lower-threshold="100"
            refresher-background="transparent">
            <view class="rank-item" v-for="(item, index) in rankList" :key="item.id">
                    <view class="badge" :class="[index < 3 ? ('badge-' + (index + 1)) : '']">
                        <!-- 排名徽章图片 -->
                        <image v-if="index === 0" :src="IMAGE_URL + '/static/index/rank1.png'" class="badge-img" mode="aspectFit"></image>
                        <image v-if="index === 1" :src="IMAGE_URL + '/static/index/rank2.png'" class="badge-img" mode="aspectFit"></image>
                        <image v-if="index === 2" :src="IMAGE_URL + '/static/index/rank3.png'" class="badge-img" mode="aspectFit"></image>
                    </view>
                    <view class="cover-wrap">
                        <u-image :src="item.cover" width="200rpx" height="200rpx" class="cover" mode="aspectFill" />

                    </view>

                    <view class="info-wrap">
                        <view class="title">{{ item.title }}</view>
                        <view class="rate-row">
                            <u-rate :count="5" :value="item.star" size="28rpx" activeColor="#FF4040"
                                inactiveColor="#FFD2D2" readonly />
                            <text class="rate-text">好评率：{{ item.goodRate }}%</text>
                        </view>
                        <view class="price-row">
                            <view class="price">
                                <view class="flex" v-if="item.price && item.price.toString().includes('.')">
                                    <view class="font28">￥</view>
                                    <view class="font36">{{ item.price.toString().split('.')[0] }}</view>
                                    <view class="font28">.{{ item.price.toString().split('.')[1] }}</view>
                                </view>
                                <view class="flex" v-else>
                                    <view class="font28">￥</view>
                                    <view class="font36">{{ item.price || '0' }}</view>
                                    <view class="font28">.00</view>
                                </view>
                                <view class="unit font28">/次</view>
                            </view>
                        </view>
                    </view>
                </view>

            <!-- 加载状态 -->
            <view class="loading-status" v-if="loading">
                <u-loading-icon mode="spinner" size="24rpx" color="#999"></u-loading-icon>
                <text class="loading-text">加载中...</text>
            </view>

            <!-- 没有更多数据 -->
            <view class="no-more" v-if="noMore && rankList.length > 0">
                <text class="no-more-text">没有更多数据了</text>
            </view>
        </scroll-view>
    </view>
</template>
<script>
import headerVue from '@/components/header.vue'
import appConfig from '@/config/app.js'
export default {
    components: {
        headerVue
    },
    data() {
        return {
            IMAGE_URL: appConfig.IMAGE_URL,
            rankList: [],
            currentPage: 1,
            pageSize: 10,
            loading: false,
            noMore: false,
            refresherTriggered: false,
            // 模拟数据源
            allData: [
                { id: 1, title: '窗帘深度拆洗', star: 5, goodRate: 99, price: '69.99', cover: '/static/index/img.png' },
                { id: 2, title: '窗帘深度拆洗', star: 5, goodRate: 99, price: '69.99', cover: '/static/index/img.png' },
                { id: 3, title: '窗帘深度拆洗', star: 5, goodRate: 99, price: '69.99', cover: '/static/index/img.png' },
                { id: 4, title: '窗帘深度拆洗', star: 5, goodRate: 99, price: '69.99', cover: '/static/index/img.png' },
                { id: 5, title: '窗帘深度拆洗', star: 5, goodRate: 99, price: '69.99', cover: '/static/index/img.png' },
                { id: 6, title: '窗帘深度拆洗', star: 5, goodRate: 99, price: '69.99', cover: '/static/index/img.png' },
                { id: 7, title: '窗帘深度拆洗', star: 5, goodRate: 99, price: '69.99', cover: '/static/index/img.png' },
                { id: 8, title: '窗帘深度拆洗', star: 5, goodRate: 99, price: '69.99', cover: '/static/index/img.png' }
            ]
        }
    },
    mounted() {
        this.loadData()
    },
    methods: {
        // 加载数据
        loadData(isRefresh = false) {
            if (this.loading) return
            this.loading = true
            setTimeout(() => {
                const startIndex = isRefresh ? 0 : (this.currentPage - 1) * this.pageSize
                const endIndex = startIndex + this.pageSize
                const newData = this.allData.slice(startIndex, endIndex)
                if (isRefresh) {
                    this.rankList = newData
                    this.currentPage = 2
                } else {
                    this.rankList = this.rankList.concat(newData)
                    this.currentPage++
                }
                this.noMore = endIndex >= this.allData.length
                this.loading = false
                if (isRefresh) {
                    this.refresherTriggered = false
                }
            }, 600)
        },
        // 下拉刷新
        onRefresh() {
            this.refresherTriggered = true
            this.currentPage = 1
            this.noMore = false
            this.loadData(true)
        },
        // 触底加载
        onLoadMore() {
            if (this.noMore || this.loading) return
            this.loadData()
        }
    }
}
</script>
<style lang="scss" scoped>
.hp-rank-con {
    width: 100%;
    height: 100%;
    position: relative;
}

.rank-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300rpx;
    z-index: 0;
}

.con-box {
    position: relative;
    padding: 0 32rpx;
    box-sizing: border-box;
    z-index: 1;

    .title {
        width: 315rpx;
        height: 153rpx;
    }

    .title-img {
        width: 315rpx;
        height: 153rpx;
    }

    .sub {
        width: 318rpx;
        font-size: 24rpx;
        color: #333333;
    }
}

.rank-icon {
    position: absolute;
    width: 401rpx;
    height: 401rpx;
    top: -100rpx;
    right: 0;
    z-index: 1;
}

.rank-list {
    height: calc(100vh - 390rpx);
    padding: 26rpx 0 0;
    box-sizing: border-box;
    background: #fff;
    border-radius: 28rpx 28rpx 0rpx 0rpx;
    margin-top: 36rpx;
}

.rank-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 24rpx;
    margin: 0 24rpx;
    margin-bottom: 56rpx;
    background: #ffffff;
    border-radius: 16rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);

    /* #ifdef MP */
    &:nth-child(1) {
        margin-top: 30rpx;
    }
    /* #endif */
    /* #ifndef MP */
    &:nth-child(2) {
        margin-top: 30rpx;
    }
    /* #endif */
}

.cover-wrap {
    position: relative;
    width: 200rpx;
    height: 200rpx;
    border-radius: 12rpx;
    overflow: hidden;
    margin-right: 34rpx;
}

.cover {
    width: 100%;
    height: 100%;
}

.badge {
    position: absolute;
    left: 24rpx;
    top: -26rpx;
    width: 77rpx;
    height: 111rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.badge-img {
    width: 77rpx;
    height: 111rpx;
}

.info-wrap {
    flex: 1;
    height: 200rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    /* 两行溢出隐藏 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.rate-row {
    display: flex;
    align-items: center;
    margin-top: 10rpx;
}

.stars {
    display: flex;
    color: #FF5A5A;
}

.stars .iconfont {
    font-size: 26rpx;
    margin-right: 6rpx;
}

.rate-text {
    margin-left: 20rpx;
    font-size: 22rpx;
    color: #FF4343;
}

.price-row {
    margin-top: 18rpx;
}

.price {
    color: #FF4343;
    font-weight: 700;
}

.yen {
    font-size: 24rpx;
    margin-right: 2rpx;
}

.price {
    display: flex;
    font-size: 30rpx;
    align-items: baseline;

    .flex {
        align-items: baseline;
    }
}

.unit {
    font-size: 22rpx;
    color: #FF4343;
    margin-left: 4rpx;
}

.loading-status,
.no-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28rpx 0;
    color: #999;
}

.loading-text {
    font-size: 24rpx;
    margin-left: 12rpx;
}
</style>